 
	<style type="text/css">
		
		.container-box{
			height: 100vh;
		}
		.elementui-headerbox{
			position: relative;
			height: 10%;
			background-color: #666;
		}
		.leftbox,.rightbox{
			float: left;
			width: 50%;
			height: 90%;
		}
		.leftbox{
			background-color: #888;
		}
		.rightbox{
			background-color: #999;
		}
		.el-menu-demo{
			min-height: 100%;
		}
	</style>



<!-- elementui / 导航栏布局 start-->
	<div class="container-box">
		<div class="elementui-headerbox">
			<!--嵌入elementui框架的导航栏组件-->
			<!-- 框架的组件文档 "https://element.eleme.cn/#/zh-CN/component/menu" -->
			<div id="app" style="overflow: hidden;height: 100%">
				<el-menu
				  :default-active="activeIndex1"
				  class="el-menu-demo"
				  mode="horizontal"
				  @select="handleSelect"
				  background-color="#545c64"
				  text-color="#fff"
				  active-text-color="#ffd04b">
				  <el-menu-item index="1" >处理中心</el-menu-item>
				  <el-submenu index="2">
				    <template slot="title">我的工作台</template>
				    <el-menu-item index="2-1">选项1</el-menu-item>
				    <el-menu-item index="2-2">选项2</el-menu-item>
				    <el-menu-item index="2-3">选项3</el-menu-item>
				    <el-submenu index="2-4">
				      <template slot="title">选项4</template>
				      <el-menu-item index="2-4-1">选项1</el-menu-item>
				      <el-menu-item index="2-4-2">选项2</el-menu-item>
				      <el-menu-item index="2-4-3">选项3</el-menu-item>
				    </el-submenu>
				  </el-submenu>
				  <el-menu-item index="3" disabled>消息中心</el-menu-item>
				  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
				</el-menu>
			</div>
			<!--elementui框架的导航栏组件结束-->
		</div>


		<!-- 左侧内容区域 -->
		<div class="leftbox">
			

		</div>


		<!-- 右侧内容区域 -->
		<div class="rightbox">
			
			
		</div>
	</div>
	
	<script>
	//组件初始化
	 var Main = {
	    data() {
	      return {
	        activeIndex1: '1'
	      };
	    },
	    methods: {
	    	//点击事件
	      handleSelect(key, keyPath) {
	        console.log(key, keyPath);
	        //获取当前点击元素对象
	        console.log($('.el-menu-demo').children().eq(keyPath[0]-1).text());
	      }
	    }
  	}
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#app')
	</script>
	<!-- elementui / 导航栏布局 end-->
